<template>
    <div
        style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;margin: 0;display:flex;flex-direction: column;align-items: center;">
        <div style="width: 80%;">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="产品名称">
                    <el-input v-model="form.productName"></el-input>
                </el-form-item>
                <el-form-item label="产品图片">
                    <div style="display: flex;align-items: center;">
                        <img v-if="form.productImg == null" @click="UploadImg" src="../assets/empty.png"
                            style="width: 50px;height: 50px;cursor: pointer;" alt="">
                        <img v-if="form.productImg != null" @click="UploadImg"
                            :src="'http://' + resourceIp + ':8094/' + form.productImg"
                            style="width: 50px;height: 50px;cursor: pointer;" alt="">
                        <input style="display: none" type="file" id="photoInputForProduct" accept="image/*"
                            @change="uploadPhotoForProduct" />
                    </div>
                </el-form-item>
            </el-form>
        </div>

        <el-button @click="submitProduct" type="primary"
            style="position: absolute;bottom: 20px;left: 0%;right: 0%;margin: auto;width: 100px;">提交</el-button>
    </div>
</template>

<script>
import request from "../axios/request"
export default {
    data() {
        return {
            form: {
                productName: null,
                productImg: null
            },
            resourceIp: null
        }
    },
    mounted() {
        this.resourceIp = this.extractIPFromURL(window.location.origin);
        console.log(this.resourceIp);
    },
    methods: {
        async submitProduct() {
            await request({
                url: "/product/api/uploadNewProduct",
                method: "POST",
                data: this.form
            })

        },
        extractIPFromURL(url) {
            // 定义正则表达式来匹配IP地址
            const ipRegex = /(?:\d{1,3}\.){3}\d{1,3}/;

            // 使用正则表达式查找匹配项
            const match = url.match(ipRegex);

            // 返回匹配到的IP地址（如果有的话）
            return match ? match[0] : null;
        },
        UploadImg() {
            let photoInputForProduct = document.getElementById(
                "photoInputForProduct"
            );
            photoInputForProduct.click();
        },
        async uploadPhotoForProduct(event) {
            console.log("开始上传");

            let file = event.target.files[0];
            if (file) {
                let formData = new FormData();
                formData.append("file", file);
                let res = await request({
                    url: "/file/api/upload",
                    method: "POST",
                    data: formData,
                });
                if (res.data.status == 200) {
                    console.log("上传成功");
                    this.form.productImg = res.data.data;
                    event.target.value = "";
                }
            }
        },
    }
}
</script>

<style></style>